<template>
  <div class="comment">
    <div style="display: flex; margin: 30px 0px">
      <a-form-item label="称呼">
        <a-input
          v-model="state.name"
          placeholder="请输入称呼"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item label="Email">
        <a-input
          v-model:value="value"
          placeholder="请输入联系方式"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item label="状态">
        <a-cascader
          v-model:value="value"
          :options="options"
          style="width: 100px"
        />
      </a-form-item>
    </div>
    <div style="margin: 10px 90%; display: flex">
      <a-button type="primary">搜索</a-button>
      <a-button style="margin: 0px 10px">重置</a-button>
    </div>

    <a-table :columns="columns" :data-source="state.list">
      <template #name="record">
        <span type="primary">通过</span>
        <span>拒绝</span>
        <span>回复</span>
        <span>删除</span>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import type { CascaderProps } from 'ant-design-vue'
import type { TableProps, TableColumnType } from 'ant-design-vue'
import axios from 'axios'
interface DataType {
  key: string
  name: string
  age: number
  address: string
  children?: any[]
}

const columns: TableColumnType<DataType>[] = [
  {
    title: '状态',
    dataIndex: ''
  },
  {
    title: '称呼',
    dataIndex: 'name'
  },
  {
    title: '联系方式',
    dataIndex: 'email'
  },
  {
    title: '原始内容',
    dataIndex: 'content'
  },
  {
    title: 'HTML内容',
    dataIndex: 'html'
  },
  {
    title: '管理文章',
    dataIndex: ''
  },
  {
    title: '创建时间',
    dataIndex: 'createAt'
  },
  {
    title: '父级评论',
    dataIndex: 'parentCommentId'
  },
  {
    title: '操作',
    dataIndex: 'nameOne',
    slots: { customRender: 'nameOne' },
    key: 'nameOne'
  }
]
const options: CascaderProps['options'] = [
  {
    value: '已通过',
    label: '已通过'
  },
  {
    value: '未通过',
    label: '未通过'
  }
]
export default defineComponent({
  setup() {
    const state = reactive({
      list: [],
      name: [],
      nameList: []
    })
    axios.get('https://creationapi.shbwyz.com/api/comment').then((res) => {
      // console.log(res);
      const { data } = res.data
      state.list = data[0]
      console.log('12', state.list[0])
    })
    // const get_fileList=()=>{
    //   axios.get('https://creationapi.shbwyz.com/api/comment').then(res=>{
    //     console.log(res)
    //     const nameList = res.data.data.filter((item:any)=>{
    //      return item.name.includes(state.list)
    //     })
    //   })
    // }
    return {
      value: ref<string[]>([]),
      options,
      state,
      columns
      // get_fileList
    }
  }
})
</script>

<style>
.comment {
  width: 100%;
  height: 100%;
}
.ant-row {
  margin-left: 30px;
}
span {
  padding: 0px 10px;
}
</style>
